<template>
    <div class="storeinformation">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>营业资质</span>
                </div>
            </div>
            <el-form ref="form3" :model="form3" label-width="180px">
                <el-form-item label="商品安全档案">
                    <div class="uploadSource bor_de rel flex" v-for="(item, index) in form3.foodRecords"
                         :key="index">
                        <label class="statusLabel curs" @mouseenter="enterMultigraph(index,2)" @mouseleave="leaveMultigraph(index,2)">
                            <i class="el-icon-check" :ref="`list2${index}`"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(item,3,'multigraph')"></i>
                        </label>
                        <img :src="item" @click='test(3)' class="wid img"/>
                    </div>
                    <div class="uploadSource flex-center curs" @click='test(3)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                </el-form-item>
                <el-form-item label="营业执照">
                    <div class="uploadSource bor_de rel flex" v-for="(item, index) in form3.license"
                         :key="index">
                        <label class="statusLabel curs" @mouseenter="enterMultigraph(index,3)" @mouseleave="leaveMultigraph(index,3)">
                            <i class="el-icon-check" :ref="`list3${index}`"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(item,4,'multigraph')"></i>
                        </label>
                        <img :src="item" @click='test(4)' class="wid img"/>
                    </div>
                    <div class="uploadSource flex-center curs" @click='test(4)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                </el-form-item>
            </el-form>
            <attachment-img ref="img3" type="imgs" :type2="storeId" @attachment='multigraph2'></attachment-img>
            <attachment-img ref="img4" type="imgs" :type2="storeId" @attachment='multigraph3'></attachment-img>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {getStoreAuth, posStoreAuth} from "@/api/shop";
    import {mapState} from "vuex";

    export default {
        name: "storinformation",
        created() {
            // this.startLoading()
            // this.$baseColorfullLoading(1,'加载中');
            this.edit();
        },
        computed: {
            ...mapState(['storeId']),
        },
        components: {attachmentImg,},
        data() {
            return {
                loading: true,
                form3: {
                    label: '',
                    foodRecords: [],
                    license: [],
                },
                labelList: [],
            }
        },
        methods: {
            handleClick() {
                this.edit()
            },
            async edit() {
                // this.bus.$emit('loading', true);
                const {data} = await getStoreAuth({id:this.storeId,});
                // this.labelList = data.labelList
                if (data.info.id) {
                    this.form3 = data.info
                }
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                // console.log(this.$refs[`list${index}`][index],index)
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            multigraph2(url) {
                if (this.form3.foodRecords && this.form3.foodRecords.length > 0) {
                    this.form3.foodRecords = this.form3.foodRecords.concat(url.arr)
                } else {
                    this.form3.foodRecords = url.arr
                }
            },
            multigraph3(url) {
                if (this.form3.license && this.form3.license.length > 0) {
                    this.form3.license = this.form3.license.concat(url.arr)
                } else {
                    this.form3.license = url.arr
                }
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                        case 3:
                            this.form3.foodRecords.remove(item);
                            break
                        case 4:
                            this.form3.license.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async onSubmit() {
                // this.form3.storeId = this.storeId
                const {msg} = await posStoreAuth(this.form3);
                this.$baseMessage(msg, "success");
                this.$router.go(-1)
            },
        }
    }
</script>
<style scoped lang="scss">
    .storeinformation .el-form {
        margin-top: 20px;
    }
</style>
